<template>
  <div class="category-card">
    <div v-for="item in cdList"
         :key="item.id"
         @click="handleNodeClick(item)"
         :class="['category-card-btn', item.id === activeBtn ? 'category-card-btn-active' : '']">{{ item.categoryName }}</div>
  </div>
</template>

<script setup name="CategoryCard">
import {getCategoryList} from "@/api/source.js";

const props = defineProps({
  modelValue: String,
  title: String,
  pid: Number,
});

const emit = defineEmits(['update:modelValue', 'change', 'ready']);

const defPid = ref(1);
defPid.value = props.pid

const activeBtn = ref('');

const cdList = ref([]);

/** 加载分类 */
const getCategory = () => {
  getCategoryList(defPid.value).then(res => {
    if (res.code === 200) {
      cdList.value = res.data;
      if (cdList.value && cdList.value.length > 0) {
        activeBtn.value = cdList.value[0].id;
        emit('change', activeBtn.value);
      }
    }
  }).catch(e => {
    console.error(e)
  })
}

const handleNodeClick = (row) => {
  activeBtn.value = row.id;
  emit('change', activeBtn.value);
}

watch(() => props.modelValue, () => {
  activeBtn.value = props.modelValue;
})

getCategory();

</script>

<style lang="scss" scoped>
.category-card {
  user-select: none;
  display: flex;
  align-items: flex-end;
  height: 40px;
  padding: 0 20px;

  &-btn {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-right: 20px;
    cursor: pointer;
  }

  &-btn-active {
    font-size: 20px;
    font-weight: 400;
    color: var(--tc-input-active);
  }

}
</style>

